import React, { FC, useCallback, useEffect, useState, useMemo } from "react";
import '../Marketing/marketing.less'
import { Select ,Input ,Button , Space,Switch ,Pagination} from 'antd';
import { connect } from 'react-redux';
import './Finance.less'
import action from '../../store/Actions/index';
import Table from '../../component/table'
import {
  EditTwoTone,
  DeleteTwoTone,
  SnippetsTwoTone,
} from '@ant-design/icons';
const { Option } = Select;


interface State {

}
interface Props {
  datalist: Array<any>,
  getscblist:any,
  administratorReducer?: any,
}



const Finance = (props:Props) => {
  const [page, setpage] = useState(5)
  const [pageIndex, setpageIndex] = useState(1)
  const [val1, setval1] = useState('')
  const [val5, setval5] = useState('')
  const [val3, setval3] = useState('')
  const [val4, setval4] = useState('')
  const [val6, setval6] = useState('')
  const columns = [
    {
      title: '学号',
      width: 100,
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
    },
    {
      title: '姓名',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: '身份证',
      dataIndex: 'cid',
      key: 'cid',
      width: 150,
    },
    {
      title: '电话',
      dataIndex: 'xsphone',
      key: 'xsphone',
      width: 150,
    },
    {
      title: '市场部',
      dataIndex: 'scb',
      key: 'scb',
      width: 150,
    },
    {
      title: '缴费明细',
      dataIndex: 'jfqk',
      key: 'jfqk',
      width: 150,
    },
    {
      title: '是否通过面试',
      dataIndex: 'address',
      key: '5',
      width: 150,
      render:(text, record)=>(
        <Switch  disabled={true}  checked={record.isms=='true'?true:false}  defaultChecked />
      )
    },
  
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (text, record) => (

        <span className={record.class!='null'?'span1s':'span2s'}>{record.class!='null'?'已入学':'未入学'}</span>
        // <Space size="middle">
        //   <EditTwoTone />
        //   <DeleteTwoTone />
        //   <SnippetsTwoTone />
        // </Space>
      )
    },
  ];
  useEffect(()=>{
    // props.getscblist()
    props.getscblist({page:page,pageIndex:pageIndex})
  },[])
  return (

    
    <div className="Marketing">
      <div className="Marketings">
        <div className="inps">
          
          <div className="divs"><b>*</b><span className="span">学生姓名</span> <Input placeholder="请输入" onChange={async (e)=>{
             setval1(e.target.value)
             setpageIndex(1)
            await props.getscblist({page:page,pageIndex:pageIndex,val1:e.target.value,val5,val3,val6})
          }}/></div>

          <div className="divs"><b>*</b><span>性别</span> <Select placeholder='请选择' style={{ width: 120 }}  onChange={async (e)=>{
             setval5(e)
             setpageIndex(1)
             console.log(e);
             
            await props.getscblist({page:page,pageIndex:1,val1,val5:e,val3,val6})

          }}>
            <Option value="男">男</Option>
            <Option value="女">女</Option>
          </Select></div>

          <div className="divs"><b>*</b><span>市场部</span> <Select placeholder='请选择' style={{ width: 100 }} onChange={async (e) => {
             setval3(e)
             setpageIndex(1)
              await props.getscblist({page:page,pageIndex:1,val1,val5,val3:e,val6})
          }}>
            <Option value="中原">中原</Option>
            <Option value="保仓">保仓</Option>
            <Option value="黑吉">黑吉</Option>
            <Option value="燕泽">燕泽</Option>
          </Select></div>
          <div className="divs"><b>*</b><span>是否入学</span> <Select placeholder='请选择' style={{ width: 120 }} onChange={async (e) => {
            setval6(e)
            setpageIndex(1)
            await props.getscblist({page:page,pageIndex:1,val1,val5,val3,val6:e})
          }}>
            <Option value="true">是</Option>
            <Option value="false">否</Option>
          </Select></div>
    
        </div>
        <div className="table">
        <Table studentData={props.administratorReducer.scbList2} columns={columns}></Table>
        </div>
          
        <div className="yema">
          <Pagination size="small" pageSize={page} current={pageIndex} total={props.administratorReducer.scbList.length} defaultPageSize={page} pageSizeOptions={['5','10','15','20']} showSizeChanger showQuickJumper onChange={async (page, pageSize)=>{
            setpageIndex(page)
            setpage(pageSize)
            // await props.getscblist({page:pageSize,pageIndex:page})
            await props.getscblist({page:pageSize,pageIndex:page,val1,val5,val3,val6})
          }}/>
        </div>
      </div>
    </div>
  )
}
// export default Marketing
export default connect(state => state, action.administratorActions)(Finance);


